<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>E-com Pilot</title>
  <style>
    :root {
      --primary-color: #4285F4;
      --user-message-bg: #4A90E2;
      --assistant-message-bg: #F1F1F1;
      --background-color: #FFFFFF;
      --text-color: #202124;
      --border-color: #E0E0E0;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
      margin: 0;
      height: 100vh;
      display: flex;
      flex-direction: column;
      background-color: var(--background-color);
      color: var(--text-color);
    }
    
    .header {
      display: flex;
      align-items: center;
      padding: 10px 16px;
      border-bottom: 1px solid var(--border-color);
      flex-shrink: 0;
      position: relative;
    }
    
    .header img {
      width: 24px;
      height: 24px;
      margin-right: 12px;
    }
    
    h1 {
      font-size: 16px;
      margin: 0;
      font-weight: 500;
    }

    .connection-status {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-left: auto;
    }
    .connection-status.connected { background-color: #34A853; }
    .connection-status.disconnected { background-color: #EA4335; }
    
    #chat-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    #chat-messages {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .message-wrapper {
      display: flex;
      width: 100%;
    }

    .message-wrapper.user-wrapper {
      justify-content: flex-end;
    }

    .message-wrapper.assistant-wrapper {
      justify-content: flex-start;
    }
    
    .chat-message {
      max-width: 80%;
      padding: 10px 14px;
      border-radius: 18px;
      word-wrap: break-word;
      line-height: 1.5;
    }

    .chat-message.user-message {
      background-color: var(--user-message-bg);
      color: white;
      border-bottom-right-radius: 4px;
    }

    .chat-message.assistant-message {
      background-color: var(--assistant-message-bg);
      color: var(--text-color);
      border-bottom-left-radius: 4px;
    }

    .error-message {
        background-color: #FFF0F0;
        color: #D8000C;
        border: 1px solid #FFD2D2;
    }

    .tool-card {
        background-color: #F8F9FA;
        border: 1px solid var(--border-color);
        border-radius: 12px;
        margin: 4px 0;
        font-size: 13px;
    }

    .tool-card-header {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        border-bottom: 1px solid var(--border-color);
    }
    .tool-card-header.success { color: #2E7D32; }
    .tool-card-header.failure { color: #C62828; }
    
    .tool-icon {
        width: 16px;
        height: 16px;
        fill: currentColor;
        flex-shrink: 0;
    }

    .status-badge {
        margin-left: auto;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 11px;
        font-weight: 500;
        color: white;
    }
    .tool-card-header.success .status-badge { background-color: #66BB6A; }
    .tool-card-header.failure .status-badge { background-color: #EF5350; }

    .tool-card-body {
        padding: 4px 12px;
    }
    
    .tool-card-body summary {
        cursor: pointer;
        padding: 4px 0;
        color: #5F6368;
    }

    .tool-details {
        padding: 8px 0 8px 12px;
        border-left: 2px solid #E8EAED;
        margin-top: 4px;
    }
    .tool-details p {
        margin: 0 0 4px;
    }
    .tool-details pre {
        background-color: #E8EAED;
        padding: 8px;
        border-radius: 4px;
        font-family: "Courier New", Courier, monospace;
        font-size: 12px;
        white-space: pre-wrap;
        word-break: break-all;
        margin: 0;
    }

    .welcome-message {
        text-align: center;
        padding: 20px;
        color: #666;
    }
    
    .input-area {
      padding: 10px 16px;
      border-top: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    #command-input {
      flex: 1;
      padding: 8px 12px;
      border: 1px solid var(--border-color);
      border-radius: 18px;
      resize: none;
      font-family: inherit;
      background-color: var(--assistant-message-bg);
      min-height: 20px;
      max-height: 100px;
      overflow-y: auto;
    }

    #command-input:focus {
        outline: none;
        border-color: var(--primary-color);
    }
    
    #execute-btn {
      background-color: transparent;
      border: none;
      padding: 6px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
    }
    
    #execute-btn:hover {
        background-color: var(--assistant-message-bg);
    }

    #execute-btn svg {
        width: 22px;
        height: 22px;
        fill: var(--primary-color);
    }

    #execute-btn:disabled svg {
        fill: #999;
    }

    .status-area {
        padding: 0 16px 10px;
        font-size: 12px;
        color: #666;
        text-align: left;
    }

    .page-info-container {
        padding: 0 16px 10px;
        font-size: 12px;
    }
    .page-info-container summary { cursor: pointer; }
    
    .menu-btn {
        background: none;
        border: none;
        cursor: pointer;
        padding: 0 8px;
        margin-right: 8px;
    }
    .menu-btn svg {
        width: 24px;
        height: 24px;
        fill: var(--text-color);
    }

    #session-sidebar {
        position: absolute;
        top: 0;
        left: -250px; /* Initially hidden */
        width: 250px;
        height: 100%;
        background-color: #F8F9FA;
        border-right: 1px solid var(--border-color);
        transition: left 0.3s ease;
        z-index: 1000;
        display: flex;
        flex-direction: column;
    }

    #session-sidebar.open {
        left: 0;
    }
    
    .session-header {
        padding: 10px 16px;
        border-bottom: 1px solid var(--border-color);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    #new-chat-btn {
        background-color: var(--primary-color);
        color: white;
        border: none;
        padding: 5px 10px;
        border-radius: 5px;
        cursor: pointer;
        font-size: 14px;
    }

    #session-list {
        flex-grow: 1;
        overflow-y: auto;
        padding: 8px;
    }

    .session-item {
        padding: 10px;
        cursor: pointer;
        border-radius: 5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .session-item:hover {
        background-color: #E8EAED;
    }
    .session-item.active {
        background-color: #D1E3FF;
    }

    .delete-session-btn {
        background: none;
        border: none;
        cursor: pointer;
        color: #888;
        visibility: hidden;
    }
    .session-item:hover .delete-session-btn {
        visibility: visible;
    }

    #overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 999; /* Below sidebar, above content */
        display: none; /* Initially hidden */
    }
    
    #overlay.visible {
        display: block;
    }

    /* 工具执行消息样式 */
    .tool-execution-message,
    .tool-auto-execution-message {
        text-align: center;
        margin: 5px 0;
        font-size: 12px;
        color: #666;
    }

    .tool-auto-execution-message {
        background-color: #F0F8FF;
        padding: 5px 10px;
        border-radius: 10px;
        border-left: 3px solid #4285F4;
    }
  </style>
</head>
<body>
    <div id="overlay"></div>
    <div id="session-sidebar">
        <div class="session-header">
            <h3>会话列表</h3>
            <button id="new-chat-btn">新会话</button>
        </div>
        <div id="session-list">
            <!-- Session items will be dynamically inserted here -->
        </div>
    </div>

    <header class="header">
        <button class="menu-btn" id="menu-toggle-btn">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></svg>
        </button>
        <img src="icons/icon48.png" alt="E-com Pilot Logo" class="logo">
        <h1>E-com Pilot</h1>
        <div id="connection-status" class="connection-status disconnected" title="与后端的连接状态"></div>
    </header>

    <div id="chat-container">
      <div id="chat-messages">
        <div class="welcome-message">
          <p>我可以帮助您管理电商后台，请问有什么可以帮您？</p>
          <p>例如: <strong>将'夏日凉鞋'价格改为199元</strong></p>
        </div>
      </div>
    </div>

    <div class="input-area">
      <textarea id="command-input" placeholder="输入您的指令..." rows="1"></textarea>
      <button id="execute-btn" title="发送 (Enter)">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
          <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"></path>
        </svg>
      </button>
    </div>

    <div class="status-area">
      <p id="status-message"></p>
    </div>

    <div class="page-info-container">
      <details>
        <summary>显示当前页面信息</summary>
        <div id="page-info">
          <p id="current-url"></p>
          <p id="page-title"></p>
          <p id="domain-info"></p>
          <p>
            <span id="platform-type" class="platform-tag"></span>
          </p>
        </div>
      </details>
    </div>
  
  <script src="sidebar.js"></script>
</body>
</html> 